<template>
  <div>
    <h1>菜单</h1>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="ID" label="ID" width="180"></el-table-column>
      <el-table-column prop="title" label="标题" width="180"></el-table-column>
      <el-table-column prop="type" label="类型"></el-table-column>
      <el-table-column label="图标">
        <template slot-scope="scope">
          <i :class="scope.row.icon"></i>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="delMenu(currentId)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getMenuList, delMenu } from "../request/index";
export default {
  name: "menu1",
  data() {
    return {
      // table中的数据
      tableData: [],
      // 弹窗是否显示
      dialogVisible: false,
      // 当前操作的菜单项的id
      currentId: -1,
    };
  },
  created() {
    // 进入页面时先发请求获取菜单数据
    this.getMenuList();
  },
  methods: {
    // 获取目录列表和属性结构
    async getMenuList() {
      // let res = await getMenuList();
      // 将后端返回的数据显示在页面上，这里是通过el-table组件的tableData实现的
      // 判断是否包含树形结构，如果包含树结构就有children，就可以展开收起
      let res2 = await getMenuList({ istree: 1 });
      this.tableData = res2.list;
    },
    // 删除菜单  一级叫目录，二级叫菜单
    handleDelete(id) {
      // 二次确认
      this.dialogVisible = true
      // 保存当前的id，后续真正删除时会用到
      this.currentId = id;
    },
    // 弹窗关闭
    handleClose() {
      this.$confirm('确认关闭？')
        .then(_ => {
          
        })
        .catch(_ => {});
    },
    // 点击确认按钮，真的要删除了！！！
    async delMenu(currentId){
      // 这个delMenu是请求。是从request导进来的
      let res = await delMenu({id: this.currentId});
      // 关闭弹窗
      this.dialogVisible = false
      // 需要获取最新数据，显示删除后的结果
      this.getMenuList()
    }
  },
};
</script>
<style lang="">
</style>